<template>
  <el-card shadow="never" class="!border-none">
    <el-page-header
      :content="id ? '编辑推销员' : '新增推销员'"
      @back="$router.back()"
    />
  </el-card>
  <el-form ref="formRef" :model="formData" :rules="rules" label-width="120px">
    <el-card shadow="never" style="margin-top: 15px" class="!border-none">
      <!-- 用户绑定 -->
      <el-form-item label="绑定用户:" prop="userId">
        <user-select
          btn-text="选择用户"
          type="primary"
          v-model="formData.userId"
          :userVo="formData.userVo"
          :id="id"
        />
      </el-form-item>
      <el-form-item label="推销员名称:" prop="name">
        <el-input
          class="w-56 ls-input"
          v-model="formData.name"
          placeholder="请输入推销员的真实姓名"
        />
      </el-form-item>
      <!-- 手机号码 -->
      <el-form-item label="手机号码:" prop="mobile">
        <el-input
          class="w-56 ls-input"
          v-model="formData.mobile"
          placeholder="请输入手机号码"
        />
      </el-form-item>
      <!-- 所在地区 -->

      <el-form-item label="状态:" prop="status">
        <el-switch
          v-model="formData.status"
          :active-text="formData.status ? '启用' : '停用'"
          :active-value="1"
          :inactive-value="0"
        />
      </el-form-item>

      <el-form-item label="园区:" prop="zone">
        <el-select v-model="formData.zone" placeholder="请选择">
          <el-option label="万科" :value="1"></el-option>
          <el-option label="碧桂园" :value="2"></el-option>
          <el-option label="木栈道" :value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="优惠力度(折):" prop="discount">
        <el-input
          class="w-56 ls-input"
          v-model="formData.discount"
          placeholder="请输入折扣（0~10）"
        />
      </el-form-item>
    </el-card>
  </el-form>
  <footer-btns>
    <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
  </footer-btns>
</template>

<script lang="ts" setup>
import { salesmanDetail, salesmanAdd, salesmanEdit } from "@/api/salesman";
import { ref, reactive } from "vue";
import FooterBtns from "@/components/footer-btns/index.vue";
import UserSelect from "@/components/user-select/index.vue";
import AreaSelect from "@/components/area-select/index.vue";
import ServiceSelect from "@/components/service-select/index.vue";
import type { ElForm } from "element-plus";
import feedback from "@/utils/feedback";

/** Interface Start **/
interface formDataObj {
  userId?: number | string; //用户id
  user?: object; //用户id
  name?: string; //师傅姓名
  mobile?: number | string; //手机号码
  status: number; //状态
  zone: number; //园区
  discount: number; //优惠力度
}
type FormInstance = InstanceType<typeof ElForm>;
const formRef = ref<FormInstance>();
/** Interface End **/

/** Data Start **/
const route = useRoute();
const router = useRouter();
const id: any = route.query.id;
const formData = ref<formDataObj>({
  userId: "", //用户id
  name: "", //师傅姓名
  mobile: "", //手机号码
  status: 1, //状态
  zone: 3, //状态
  discount: 10, //状态
});
// 表单校验规则
const rules = reactive<object>({
  userId: [{ required: true, message: "请选择用户", trigger: [] }],
  name: [{ required: true, message: "请输入师傅名称", trigger: "blur" }],
  mobile: [
    { required: true, message: "请输入手机号", trigger: ["blur"] },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: "手机号码输入有误",
      trigger: ["blur"],
    },
  ],
  status: [{ required: true, message: "请选择状态", trigger: "change" }],
  zone: [{ required: true, message: "请选择园区", trigger: "change" }],
  discount: [
    {
      pattern: /^[0-9]{1}\.{0,1}\d{0,1}$/,
      required: true,
      message: "请选择优惠力度",
      trigger: "change",
    },
  ],
});
/** Data End **/

/** Methods Start **/
// 获取详情
const getsalesmanDetail = async (id: number): Promise<void> => {
  (formData.value as {}) = await salesmanDetail({ id });
};
// 添加师傅
const handlesalesmanAdd = async (): Promise<void> => {
  //   const goodsIds = formData.value.goodsIds.join(",");
  //   console.log({ ...formData.value, goodsIds });

  await salesmanAdd({ ...formData.value });
  router.back();
  feedback.msgSuccess("操作成功");
};
// 编辑师傅
const handlesalesmanEdit = async (): Promise<void> => {
  //   const goodsIds = formData.value.goodsIds.join(",");
  await salesmanEdit({ ...formData.value });
  router.back();
  feedback.msgSuccess("操作成功");
};
// 提交数据
const onSubmit = (formEl: FormInstance | undefined): void => {
  //   formData.value.goodsIds = formData.value.goodsList.map((item) => item.id);
  if (!formEl) return;
  formEl.validate((valid): boolean | undefined => {
    if (!valid) return false;
    if (!id) handlesalesmanAdd();
    else handlesalesmanEdit();
  });
};
/** Methods End **/

/** LifeCycle Start **/
// 请求详情 => 如果是编辑的话
if (id) getsalesmanDetail(id);
/** LifeCycle End **/
</script>

<style lang="scss" scoped>
.ls-input,
.select {
  width: 340px;
}
.serviceItem :deep() .el-form-item__content {
  display: block;
}
.serviceItem :deep() .dialog__trigger {
  width: 80px;
}
</style>
